<template>
  <div>
    <h3 ref="leaky">我是泄漏组件</h3>
  </div>
</template>

<script>
export default {
  name: "LeakyComponent",
  mounted() {
    // 模拟 DOM 引用
    // this.domRef = this.$refs.leaky;

    // 模拟定时器泄漏
    this.timer = setInterval(() => {
      console.log("仍然在运行定时器");
    }, 1000);

    // let timer2 = setInterval(() => {
    //   console.log("仍然在运行定时器");
    // }, 1000);

    // setInterval(() => {
    //   console.log("仍然在运行定时器");
    // }, 1000);

    // window.leakList = window.leakList || [];
    // window.leakList.push(this); // 故意让组件无法 GC

    //模拟总线
    this.$bus.$on("modalpassword-open", function () {
      console.log("bus memory leak");
    });

    //模拟jquery事件
    $("#bsModal1").on("show.bs.modal", (e) => {});

    //模拟var
    // var a = 100;
  },
  beforeDestroy() {
    // 👇 如果不加这些清理，会导致内存泄漏
    clearInterval(this.timer);
    // this.domRef = null;
    // window.leakList = null;
    this.$bus.$off("modalpassword-open");//移除所有订阅
    $("#bsModal1").off();
  },
};
</script>
